<template>
  <div>
    <modal-header :left="`设备号修改审核`" :right="title" @back="onBack" />
    <div style="padding :20px 0;">
      <div style="padding :0px 20px 10px; ">
        <badge text="基本信息" />
        <a-row>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">车牌号：</span>
            {{ data.vehiclePlate || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">原设备号：</span>
            {{ data.oldDeviceNo || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">修改设备号：</span>
            {{ data.newDeviceNo || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">提交时间：</span>
            {{ data.createTime || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">提交人：</span>
            {{ data.createUser || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">所属企业：</span>
            {{ data.companyName || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">所属门店：</span>
            {{ data.storeName || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">原设备处理：</span>
            {{ data.processType == 1 ? '报废' : data.processType == 2 ? '解除绑定' : '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;">
            <span class="title-label">处理原因：</span>
            {{ data.scrapReason || '-' }}
          </a-col>
        </a-row>
      </div>
      <div style="background-color: #f0f2f5;height: 12px;"></div>
      <div style="padding : 20px; ">
        <badge text="审核信息" />
        <a-row>
          <a-col :span="8" style="margin-bottom:10px;">
            <div class="flex_start">
              <span class="title-label">审核状态：</span>
              <div class="flex_start" v-if="data.status === 0">
                <div class="yuan lightBlue"></div>
                <div>待审核</div>
              </div>
              <div class="flex_start" v-if="data.status === 1">
                <div class="yuan green"></div>
                <div>审核通过</div>
              </div>
              <div class="flex_start" v-if="data.status === 2">
                <div class="yuan red"></div>
                <div>审核不通过</div>
              </div>
            </div>
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;" v-if="data.status === 1 || data.status === 2">
            <span class="title-label">审核人：</span>
            {{ data.auditUserName || '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;" v-if="data.status === 1 || data.status === 2">
            <span class="title-label">审核时间：</span>
            {{ data.auditTime || '-' }}
          </a-col>
          <!-- <a-col :span="8" style="margin-bottom:10px;" v-if="data.status === 1">
            <span class="title-label">原设备处理：</span>
            {{ data.processType == 1 ? '报废' : data.processType == 2 ? '解除绑定' : '-' }}
          </a-col>
          <a-col :span="8" style="margin-bottom:10px;" v-if="data.status === 1 && data.processType == 1">
            <span class="title-label">报废原因：</span>
            {{ data.scrapReason || '-' }}
          </a-col> -->
          <a-col :span="8" style="margin-bottom:10px;" v-if="data.status === 2">
            <span class="title-label">不通过原因：</span>
            {{ data.failedReason || '-' }}
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import badge from '@/components/badge'
import modalHeader from '@/components/modal-header'
import {
  deviceChangeAuditDetail
} from '@/services/car'
export default {
  name: 'DeviceChangeAuditDetail',
  components: { modalHeader, badge },
  data () {
    return {
      id: '',
      title: '查看设备号审核信息',
      data: {}
    }
  },
  methods: {
    onInitial (id) {
      this.id = id
      this.getDetail()
    },
    onBack () {
      this.$emit('close')
    },
    async getDetail () {
      const res = await deviceChangeAuditDetail(this.id)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.data = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    }
  }
}
</script>
